<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>Contents</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
<link rel="stylesheet" type="text/css" href="css/style2.css" />
<link rel="stylesheet" type="text/css" href="css/mystyle.css" />
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--fonts start-->
<link href='http://fonts.useso.com/css?family=Ruluko' rel='stylesheet' type='text/css'>
<link href='http://fonts.useso.com/css?family=Work+Sans:400,600,500,700,800,900,200,300' rel='stylesheet' type='text/css'>
<!--//fonts-->
<script type="text/javascript" src="js/jquery.js"></script>
	<!-- start-smoth-scrolling -->
</head>
<body>

<!--horizan start here-->
<div class="top-navg ">
	<div class="container1">
		<div class=" logo1 wow tada" data-wow-delay="0.3s">
			<a href=#><img src="images/flower5.png" alt="" width="244px" height="40px"></a>
		</div>
		<div class="navigation1 ">
			 <input type="text" node-type="searchInput" autocomplete="off" value="" class="form-control1" placeholder="search what you like"/>
			 <a href=# class="a-search"><span class="glyphicon glyphicon-search"></span></a>
		</div>
		<div class="navigation">	
			<div class="menu menu-li">
				<ul class="menu-list">
					<li class="menu-item menu-item-current"><a href=# class="menu-link"><span class="glyphicon glyphicon-home"></span>&nbsp&nbsp首页</a></li>
					<li class="menu-item"><a href=# class="menu-link"><span class="glyphicon glyphicon-th-large"></span>&nbsp&nbsp发现</a></li>			
					<li class="menu-item"><a href=# class="menu-link"><span class="glyphicon glyphicon-user"></span>&nbsp&nbsp用户</a></li>
					<li class="menu-item"><a href=# class="menu-link"><span class="glyphicon glyphicon-envelope"></span>&nbsp&nbsp联系我</a></li>
				</ul>
				
				
			</div>

			 <script>
				   $( "span.menu-ic" ).click(function() {
					 $( ".navigation ul" ).slideToggle( 300, function() {
					 // Animation complete.
					  });
					 });
				</script>
	</div>
	<div class="navigation menu-line"></div>
	<ul class=" head-icons wow bounceInRight" data-wow-delay="0.3s">
				 		<li><a href="#"><span class="fa"> </span></a></li>
				 		<li><a href="#"><span class="tw"> </span></a></li>
				 	</ul>
	<div class="clearfix"></div>
</div>
</div>
<!--mother grid start here-->

<div class="main-grid-one2"  id="one">
<!---welcome-->
<div class="mid-box">
<div class="left-part"></div>
<div class="mid-part">
<div class="mid-con">
<div class="mid-con-top"></div>
<div class="mid-con-top-line"></div>      
<div class="mid-con-left"><div class="mid-con-left-pic"><img src="images/a2.jpg" width="46px" height="46px" style="border-radius:50%; overflow:hidden;"></img></div></div>
<div class="mid-con-right">
<div class="mid-con-right-top font-css"><a>仙人掌和菲猫</a></div>
<div class="mid-con-right-top font-css">fafaf</div>
<div class="mid-con-right-top font-css">今天7月1号，中国共产党成立95周年纪念日。</div>
<div class="mid-con-right-mid">
<!-- picture start -->
<div class="col-md-3 wel-img1 wow bounceInLeft" data-wow-delay="0.3s">
   <ul class="welcome-grid gr-welcome ">
		<li>
		   <h4 class="zero">I want to go home!</h4>
		   <p class="zero">wish tomorrow a sunny day!</p>
		</li>
		<li><img class="top" src="images/r4.jpg" alt=""/></li>
	</ul>
</div>
<!-- picture end -->
</div>
<div class="mid-con-right-but">
<div class="time1 font-css">今天 19:00 来自 一直播</div>
<div class="mid-con-right-but-line"></div>
<div class="mid-con-right-but-del"><span class="glyphicon glyphicon-star-empty"></span><a>&nbsp&nbsp赞（3）</a></div>
<div class="mid-con-right-but-line"></div>
<div class="mid-con-right-but-del"><span class="glyphicon glyphicon-trash"></span><a>&nbsp&nbsp删除</a></div>
</div>
</div>
</div>
<div class="mid-con1">
<div class="mid-con-top"></div>
<div class="mid-con-top-line"></div>      
<div class="mid-con-left"><div class="mid-con-left-pic"><img src="images/a2.jpg" width="46px" height="46px" style="border-radius:50%; overflow:hidden;"></img></div></div>
<div class="mid-con-right">
<div class="mid-con-right-top font-css"><a>仙人掌和菲猫</a></div>
<div class="mid-con-right-top font-css">今天 19:00 来自 一直播</div>
<div class="mid-con-right-mid1 font-css">怎么自动生成的都乱了呀呀怎么自动生成的都乱了呀呀怎么自动生成的都乱了呀呀怎么自动生成的都乱了呀呀怎么自动生成的都乱了呀呀怎么自动生成的都乱了呀呀怎么自动生成的都乱了呀呀怎么自动生成的都乱了呀呀</div>
<div class="mid-con-right-but">
<div class="time font-css">今天 19:00 来自 一直播</div>
<div class="mid-con-right-but-line"></div>
<div class="mid-con-right-but-del"><span class="glyphicon glyphicon-star-empty"></span><a>&nbsp&nbsp赞（3）</a></div>
</div>
</div>
</div>
</div>
<div class="right-part">
<div class="right-con">
<div class="right-con-top"><img src="images/dog.jpg" width="100%" height="78px"></img></div>
<div class="right-con-but"><div class="right-con-but-name font-css"><a>${uname}</a></div>
<div class="right-con-but-opre">
<div class="opration"><div class="opration1"><span class="glyphicon glyphicon-pencil"></span><a>&nbsp&nbsp发布</a></div></div>
<div class="right-con-but-opre-line"></div>
<div class="opration"><div class="opration1"><span class="glyphicon glyphicon-star-empty"></span><a>&nbsp&nbsp历史</a></div></div>
</div></div>
</div>
</div>
</div>
</div>
	
<!--modal start  -->
<div class="mymodal novisib" id="mymodal">
<div class="modal-container">
<div class="modal-top"><div class="modal-title font-css">今天有什么新鲜事想和大家说</div><div class="modal-close"><span class="glyphicon glyphicon-remove"></span></div></div>
<div class="modal-mid">
<input type="text" class="input-style1" placeholder="请输入标题..." autocomplete="off"/>
<textarea class="input-style2" autocomplete="off"></textarea>
<div class="modal-but">
<button class="modal-button font-css">发&nbsp布</button>
</div></div></div></div>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><!--没这个js就弹不出来  -->
<script type="text/javascript" src="js/user/bootstrap.min.js"></script>
<script type="text/javascript" >
var userid=${id}
 $(function(){
  $(".right-part .right-con .opration a:eq(0)").click(function(){
    $("#mymodal").removeClass("novisib");
  });
  
  $(".mymodal .modal-top .modal-close").click(function(){
  	 $("#mymodal").addClass("novisib");
  })
  $(".modal-but button").click(function(){
  var title=$(".mymodal .modal-mid input").val();
  var content=$(".mymodal .modal-mid textarea").val();
  var typename="新鲜事"
  /* var userid=${id} */
  $.ajax({
	type:"post",
	dataType:"json",
	url:"addContent",
	data:{"title":title,"content":content,"typename":typename,"userid":userid},
	success:function(json){
		if(json.status=="success"){
			alert("发布成功！");
		}else{
			alert("发布失败，题目太长，或者内容太长！");
		}		
	}
	});
  
  })
  
$(".right-part .right-con .opration a:eq(1)").click(function(){
$.ajax({
	type:"post",
	dataType:"json",
	url:"findConOfUser",
	data:{"userid":userid},
	success:function(json){
		name=json.status;
		$(".mid-part").empty();
		content(json.contents,name);
	}
	});
	
	/*  */
	function content(contents,name){
		var box1=""
		$.each(contents, function(i, n) {
			box1="<div class='mid-con1'>"+
					"<div class='mid-con-top'></div>"+
					"<div class='mid-con-top-line'></div>"+      
					"<div class='mid-con-left'><div class='mid-con-left-pic'><img src='images/a2.jpg' width='46px' height='46px' style='border-radius:50%; overflow:hidden;'></img></div></div>"+
					"<div class='mid-con-right'>"+
					"<div class='mid-con-right-top font-css'><a>"+name+"</a></div>"+
					"<div class='mid-con-right-top font-css'>"+n.title+"</div>"+
					"<div class='mid-con-right-mid1 font-css'>"+n.content+"</div>"+
					"<div class='mid-con-right-but'><div class='time font-css'>"+n.time+" </div><div class='mid-con-right-but-line'></div><div class='mid-con-right-but-del'><span class='glyphicon glyphicon-trash'></span><a href='javascript:dodelete("+n.ctid+")'>&nbsp&nbsp删除</a></div></div>"+
					"</div></div>"
                    $(".mid-part").append(box1);
                    });
		
	}
	/*  */
	
});
  
});
</script>

<!--modal end  -->
<!--footer end here-->
    <div class="copy-right wow shake" data-wow-delay="0.3s">
    	 <p>Copyright &copy; 2016.Company name All rights reserved.<a target="_blank" href=javascripte:void(0)>for study.</a></p>
    </div>
    


<!-- animated-css -->
		<link href="css/animate.css" rel="stylesheet" type="text/css" media="all">
		<script src="js/wow.min.js"></script>
		<script>
		 new WOW().init();
		</script>
<!-- animated-css -->
<!-- start -->
<script type="text/javascript">
$(function(){
	function content(contents){
		var box1=""
		$.each(contents, function(i, n) {
		console.log("userid"+userid+" n.userid"+n.userid)
		if(n.userid==userid){
			box1="<div class='mid-con1'>"+
					"<div class='mid-con-top'></div>"+
					"<div class='mid-con-top-line'></div>"+      
					"<div class='mid-con-left'><div class='mid-con-left-pic'><img src='images/a2.jpg' width='46px' height='46px' style='border-radius:50%; overflow:hidden;'></img></div></div>"+
					"<div class='mid-con-right'>"+
					"<div class='mid-con-right-top font-css'><a>"+n.username+"</a></div>"+
					"<div class='mid-con-right-top font-css'>"+n.title+"</div>"+
					"<div class='mid-con-right-mid1 font-css'>"+n.content+"</div>"+
					"<div class='mid-con-right-but'><div class='time1 font-css'>"+n.time+" </div><div class='mid-con-right-but-line'></div>"+
					"<div class='mid-con-right-but-del'><span class='glyphicon glyphicon-star-empty'></span><a href='javascript:getZan("+n.ctid+","+n.numberzan+")' id='"+n.ctid+"'>&nbsp;&nbsp;赞（"+n.numberzan+"）</a></div>"+
					"<div class='mid-con-right-but-line'></div><div class='mid-con-right-but-del'><span class='glyphicon glyphicon-trash'></span><a href='javascript:dodelete("+n.ctid+")'>&nbsp&nbsp删除</a></div></div>"+
					"</div></div>"
			}else{
			box1="<div class='mid-con1'>"+
					"<div class='mid-con-top'></div>"+
					"<div class='mid-con-top-line'></div>"+      
					"<div class='mid-con-left'><div class='mid-con-left-pic'><img src='images/a2.jpg' width='46px' height='46px' style='border-radius:50%; overflow:hidden;'></img></div></div>"+
					"<div class='mid-con-right'>"+
					"<div class='mid-con-right-top font-css'><a>"+n.username+"</a></div>"+
					"<div class='mid-con-right-top font-css'>"+n.title+"</div>"+
					"<div class='mid-con-right-mid1 font-css'>"+n.content+"</div>"+
					"<div class='mid-con-right-but'><div class='time font-css'>"+n.time+" </div><div class='mid-con-right-but-line'></div><div class='mid-con-right-but-del'><span class='glyphicon glyphicon-star-empty'></span><a href='javascript:getZan("+n.ctid+","+n.numberzan+")' id='"+n.ctid+"'>&nbsp&nbsp赞("+n.numberzan+")</a></div></div>"+
					"</div></div>"		
			}
                    $(".mid-part").append(box1);
                    });
		
	}

	$.ajax({
	type:"post",
	dataType:"json",
	url:"allContent",
	data:{},
	success:function(json){
		size=json.size;
		content(json.contents);
	}
	});
	

})

function dodelete(ctid){
		$.ajax({
		type:"post",
		dataType:"json",
		url:"deleteContent",
		data:{"ctid":ctid},
		success:function(json){
			window.location.reload();
		}
		});
	
	}

function getZan(ctid,numberzan){
var numberzan=$("#"+ctid).html().replace(/[^0-9]/ig,""); /*js提取字符串中的数字  */
	$.ajax({
		type:"post",
		dataType:"json",
		url:"getZan",
		data:{"ctid":ctid,"numberzan":numberzan},
		success:function(json){
			console.log(json.msg);
			$("#"+ctid).html("&nbsp;&nbsp;赞（"+json.msg+"）");
		}
		});
}	

</script>
<!-- end -->
</body>
</html>
